<template>
  <div>
    <div class="home">
      <v-toolbar color="teal darken-3">
        <v-app-bar-nav-icon @click="show_flag = !show_flag"></v-app-bar-nav-icon>
      </v-toolbar>

      <v-navigation-drawer
          v-model="show_flag"
          expand-on-hover
          mini-variant-width="64"
          absolute
          temporary
      >
        <v-list nav dense>
          <v-list-item-group
              v-model="group"
              active-class="teal lighten-5"
          >
            <v-list-item>
              <v-list-item-avatar>
                <img src="../../src/assets/KGQA.png" alt="alt" />
              </v-list-item-avatar>
              <v-list-item-title v-if="$store.getters.isLoggedIn">
                <v-btn  plain>{{ getTag() }} : {{ $store.getters.name }}</v-btn>
              </v-list-item-title>
            </v-list-item>

            <v-list-item v-if="!$store.getters.isLoggedIn"  @click="showLoginDialog = true;">
              <v-list-item-icon>
                <v-icon color="teal darken-4" large>toggle_on</v-icon>
              </v-list-item-icon>
              <v-list-item-title>
                <v-btn plain>Login</v-btn>
              </v-list-item-title>
            </v-list-item>

            <v-list-item v-if="!$store.getters.isLoggedIn" @click="showRegisterDialog = true;">
              <v-list-item-icon>
                <v-icon color="teal darken-4" large>mdi-plus-circle</v-icon>
              </v-list-item-icon>
              <v-list-item-title>
                <v-btn plain >Register</v-btn>
              </v-list-item-title>
            </v-list-item>

            <v-list-item  @click="toTotal()">
              <v-list-item-icon>
                <v-icon color="teal darken-4" large>storage</v-icon>
              </v-list-item-icon>
              <v-list-item-title>
                <v-btn plain>问题列表</v-btn>
              </v-list-item-title>
            </v-list-item>

            <v-list-item v-if="$store.getters.isStudent" @click="toMyQuestion()">
              <v-list-item-icon>
                <v-icon color="teal darken-4" large>history</v-icon>
              </v-list-item-icon>
              <v-list-item-title>
                <v-btn plain >我的问题</v-btn>
              </v-list-item-title>
            </v-list-item>

            <v-list-item v-if="$store.getters.isTeacher" @click="toMyAnswer()">
              <v-list-item-icon>
                <v-icon color="teal darken-4" large>history</v-icon>
              </v-list-item-icon>
              <v-list-item-title>
                <v-btn plain >我的确认/回答</v-btn>
              </v-list-item-title>
            </v-list-item>

            <v-list-item v-if="$store.getters.isStudent" @click="toQuestion()">
              <v-list-item-icon>
                <v-icon color="teal darken-4" large>create</v-icon>
              </v-list-item-icon>
              <v-list-item-title>
                <v-btn plain >提出问题</v-btn>
              </v-list-item-title>
            </v-list-item>

            <v-list-item v-if="$store.getters.isTeacher" @click="toAnswer()">
              <v-list-item-icon>
                <v-icon color="teal darken-4" large>create</v-icon>
              </v-list-item-icon>
              <v-list-item-title>
                <v-btn plain >回答问题</v-btn>
              </v-list-item-title>
            </v-list-item>


            <v-list-item v-if="$store.getters.isLoggedIn" @click="$store.dispatch('logout')">
              <v-list-item-icon>
                <v-icon color="teal darken-4" large>toggle_off</v-icon>
              </v-list-item-icon>
              <v-list-item-title>
                <v-btn plain >Logout</v-btn>
              </v-list-item-title>
            </v-list-item>

          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>
    </div>

    <router-view />

    <LoginDialog :show-login-dialog.sync="showLoginDialog"></LoginDialog>
    <RegisterDialog :show-register-dialog.sync="showRegisterDialog"></RegisterDialog>

    <Toast></Toast>

  </div>

</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Toast from "@/components/Toast.vue";
import LoginDialog from "@/components/LoginDialog.vue";
import RegisterDialog from "@/components/RegisterDialog.vue";
import { ANSWER_ROUTE, HOME_ROUTE, MY_ANSWER_ROUTE, MY_QUESTION_ROUTE, QUESTION_ROUTE } from "@/router";

@Component({
  name: "Base",
  components: { RegisterDialog, LoginDialog, Toast, SignInDialog: LoginDialog }
})
export default class Base extends Vue {
  showLoginDialog = false;
  showRegisterDialog = false;
  show_flag = false;
  group = null;

  getTag() {
    if (this.$store.getters.clientTag == 0) {
      return "学生";
    } else if (this.$store.getters.clientTag == 1) {
      return "老师";
    }
  }

  toTotal() {
    if (this.$route.name === HOME_ROUTE.name) {
      this.$router.go(0);
    } else {
      this.$router.push(HOME_ROUTE);
    }
  }

  toMyQuestion() {
    if (this.$route.name === MY_QUESTION_ROUTE.name) {
      this.$router.go(0);
    } else {
      this.$router.push(MY_QUESTION_ROUTE);
    }
  }

  toQuestion() {
    if (this.$route.name === QUESTION_ROUTE.name) {
      this.$router.go(0);
    } else {
      this.$router.push(QUESTION_ROUTE);
    }
  }

  toMyAnswer() {
    if (this.$route.name === MY_ANSWER_ROUTE.name) {
      this.$router.go(0);
    } else {
      this.$router.push(MY_ANSWER_ROUTE);
    }
  }

  toAnswer() {
    if (this.$route.name === ANSWER_ROUTE.name) {
      this.$router.go(0);
    } else {
      this.$router.push(ANSWER_ROUTE);
    }
  }
}
</script>

<!--<style scoped lang="scss">

.baseHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 24px;
  height: 80px;
  background-image: linear-gradient(#9cd5bc, #d3f5d9);
}

.baseButton {
  margin: 0 4px;
}

.nameSpan {
  margin-right: 8px;
  background-color: #0c422e;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
}
</style>
-->